<template>
	<view>
		<ttBar title="门店课表" leftIcon="icon-back" bgColor="#ffce26"></ttBar>
		<view class="weekBox">
			<text class="preBtn" @tap="prevWeek">上周</text>
			<text class="week">{{ weekDate[0].fullDate }} ~ {{ weekDate[6].date }}</text>
			<text class="nextBtn" @tap="nextWeek">下周</text>
		</view>
		<scroll-view :style="{ height: scHeight + 'px', width: '100%', 'background-color': '#ffffff', position: 'relative' }" :scroll-x="true" :scroll-y="true" @scroll="scView">
			<view class="fixedHead" v-if="weekTop" :style="{ top: weekTop + 'px' }">
				<view class="c1"></view>
				<block v-for="(item, index) in weekDate">
					<text :key="index">{{ item.week }} {{ item.date }}</text>
				</block>
			</view>
			<view class="tableBox">
				<view class="head">
					<view class="c1"></view>
					<block v-for="(item, index) in weekDate">
						<text :key="index">{{ item.week }} {{ item.date }}</text>
					</block>
				</view>
				<view class="timeBox" v-if="isShow">
					<block v-for="(item, index) in classTable">
						<view class="row" :key="index">
							<view class="c1">
								<text>{{ index < 10 ? '0' + index : index }}:00</text>
							</view>
							<block v-for="(itm, idx) in classTable[index]">
								<view class="classBox" :key="idx">
									<block v-if="classTable[index][idx]" v-for="(it, ix) in classTable[index][idx]">
										<view class="classItem" :class="[it.isOver?'active':'']" @tap="toDt" :data-index="index" :data-idx="idx" :data-ix="ix">
											<text>{{ it.className }}</text>
											<text>（{{ it.tNames }}）{{ it.classTime }}</text>
										</view>
									</block>
								</view>
							</block>
						</view>
					</block>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
import { mapState } from 'vuex';
import ttBar from '../../components/ttBar/ttBar.vue';
import API from '../../common/api.js';
import TL from '../../common/tool.js';
export default {
	components: {
		ttBar
	},
	computed: {
		...mapState({
			userInfo: state => state.user.userInfo,
			selectShop: state => state.shop.selectShop
		})
	},
	data() {
		return {
			nowWeek: 0, //当前周
			weekFmt: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
			scHeight: uni.getSystemInfoSync().screenHeight - uni.getSystemInfoSync().statusBarHeight - uni.upx2px(200),
			weekDate: [],
			startDate: null,
			endDate: null,
			oldData: [],
			classTable: [],
			isShow: true,
			weekShow: false,
			weekTop: 0
		};
	},
	methods: {
		toDt(e){
			let _index=parseInt(e.currentTarget.dataset.index);
			let _idx=parseInt(e.currentTarget.dataset.idx);
			let _ix=parseInt(e.currentTarget.dataset.ix);
			let _obj=this.classTable[_index][_idx][_ix];
			_obj.tapDate=this.weekDate[_obj.weekNum-1].fullDate;
			uni.setStorageSync("tbDt",_obj);
			this.toPage({
				url:"classTableDt"
			})
		},
		scView(e) {
			if (e.detail.scrollTop > 50) {
				this.weekTop = e.detail.scrollTop;
			} else {
				this.weekTop = 0;
			}
		},
		nextWeek() {
			this.nowWeek = this.nowWeek + 1;
			this.weekDate = [];
			this.classTable = [];
			this.getWeekDate();
			this.getData();
		},
		prevWeek() {
			this.nowWeek = this.nowWeek - 1;
			this.weekDate = [];
			this.classTable = [];
			this.getWeekDate();
			this.getData();
		},
		getWeekDate() {
			let _now = new Date();
			_now.setTime(_now.getTime() + this.nowWeek * 7 * 1000 * 60 * 60 * 24);
			let _week = _now.getDay() == 0 ? 6 : _now.getDay() - 1;
			for (let i = 0; i < 7; i++) {
				let _new = new Date();
				_new.setTime(_now.getTime() + (1000 * 60 * 60 * 24 * (i - _week)));
				let _obj = {
					fullDate: TL.datePattern(_new, 'yyyy-MM-dd'),
					date: TL.datePattern(_new, 'MM-dd'),
					weekNum: i,
					week: this.weekFmt[i]
				};
				this.weekDate[i] = _obj;
			}
		},
		getData() {
			this.$store
				.dispatch('apiGetStoreTable', {
					weekNum: this.nowWeek,
					storeId: this.selectShop.id
				})
				.then(res => {
					console.log(res);
					this.oldData = res.data.data.sort((a, b) => {
						return TL.compareTimeStr(a.begin, b.begin);
					});
					this.createTable();
				});
		},
		createTable() {
			let _this=this;
			var _today=TL.datePattern(new Date(),'yyyy-MM-dd'); 
			for (let i = 0; i < 24; i++) {
				_this.classTable[i] = [[], [], [], [], [], [], []];
				_this.oldData.forEach(n => {
					n.tNames = n.teacherName.substr(0, n.teacherName.length - 1);
					if(TL.dateStrToNum(_this.weekDate[n.weekNum-1].fullDate)<TL.dateStrToNum(_today)){
						n.isOver = true;
					}else{
						n.isOver = false;
					}
					let _stim = parseInt(n.begin.substr(0, 2));
					if (_stim == i) {
						if (
							TL.dateStrToNum(_this.weekDate[n.weekNum-1].fullDate) >= TL.dateStrToNum(n.startDate) &&
							(!n.endTime || (n.endTime && TL.dateStrToNum(_this.weekDate[n.weekNum-1].fullDate) <= TL.dateStrToNum(n.endTime)))
						) {
							_this.classTable[i][n.weekNum-1].push(n);
						}
					}
				});
			}
			_this.isShow = false;
			_this.isShow = true;
		}
	},
	onLoad() {
		this.getWeekDate();
		this.getData();
	}
};
</script>

<style lang="less">
page {
	background-color: #f6f6f6;
}
.weekBox {
	display: flex;
	background-color: #ffffff;
	height: 90upx;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 20upx;
	.preBtn,
	.nextBtn {
		font-size: 28upx;
		border: 1px solid #e0e0e0;
		padding: 6upx 24upx;
		border-radius: 6upx;
		color: #3b434d;
	}
	.week {
		font-size: 28upx;
		color: #3b434d;
		margin: 0 20upx;
	}
}
.fixedHead {
	display: flex;
	align-items: center;
	height: 66upx;
	font-size: 32upx;
	border-bottom: 1px solid #f0f0f0;
	position: absolute;
	width: 100%;
	top: 0;
	left: 0;
	z-index: 9;
	text {
		height: 65upx;
		width: 300upx;
		text-align: center;
		border-left: 1px solid #f0f0f0;
		line-height: 65upx;
		box-sizing: border-box;
		flex-shrink: 0;
		background-color: #ffffff;
	}
	.c1 {
		width: 110upx;
		flex-shrink: 0;
	}
}
.tableBox {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	background-color: #ffffff;
	.head {
		display: flex;
		align-items: center;
		height: 66upx;
		font-size: 32upx;
		border-bottom: 1px solid #f0f0f0;
		text {
			height: 65upx;
			width: 300upx;
			text-align: center;
			border-left: 1px solid #f0f0f0;
			line-height: 65upx;
			box-sizing: border-box;
		}
		.c1 {
			width: 110upx;
			flex-shrink: 0;
		}
	}
	.timeBox {
		display: flex;
		flex-direction: column;
		.row {
			display: flex;
			border-bottom: 1px solid #f0f0f0;
			.c1 {
				width: 110upx;
				flex-shrink: 0;
				position: relative;
				display: flex;
				justify-content: space-around;
				align-items: flex-start;
				> text {
					font-size: 28upx;
					background-color: #ffffff;
					position: relative;
					transform: translateY(-50%);
					padding: 0 6upx;
				}
			}
			.classBox {
				width: 300upx;
				min-height: 120upx;
				border-left: 1px solid #f0f0f0;
				flex-shrink: 0;
				display: flex;
				flex-direction: column;
				align-items: center;
				.classItem {
					width: 294upx;
					height: 114upx;
					font-size: 24upx;
					display: flex;
					flex-direction: column;
					background-color: #82c5f8;
					color: #ffffff;
					border-radius: 6upx;
					padding: 6upx;
					margin-top: 4upx;
				}
				.active{
					background-color: #ffaa45;
				}
			}
		}
	}
}
</style>
